const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'),//__dirname代表根目录，拼接源文件路径
    filename: 'index.html'
})

//向外暴露一个打包的配置对象
module.exports = {
    mode: 'development', //production二选一
    plugins: [
        htmlPlugin
    ],
    module: { //所有第三方 模块的配置规则
        rules: [ //第三方匹配规则
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //打包处理css样式的第三方loader
            { test: /\.scss$/, use: ['style-loader', 'css-loader?modules','sass-loader'] }, //打包处理css样式的第三方loader
            { test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader' } //打包处理字体文件loader
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'],  //表示这几个文件的后缀名可以不写
        alias: {
            '@': path.join(__dirname, './src')    //这样@符合代表src的根目录
        }
    }
}